<template>
  <div id="registerContainer">
    <headerTitle text='注册'></headerTitle>
    <div class="register">
      <div class="registerLogo">
          <img src="../assets/img/logo.png">
      </div>
      
      <ul>
        <li>
          <label>姓名</label>
          <input type="text" id="userName" name="userName" v-model="infos.userName" placeholder="请输入姓名">
        </li>
        <li>
          <label>手机号码</label>
          <input type="number" id="mobileNo" name="mobileNo" v-model="infos.mobileNo" placeholder="请输入手机号">
        </li>
        <li>
          <label>设置密码</label>
          <input type="password" id="password" name="password" v-model="infos.password" placeholder="请设置密码">
        </li>
        <li>
          <label>性别</label>
          <select name="sex" value="" v-model="infos.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </li>
        <li>
          <label>邮箱</label>
          <input type="email" id="id" name="id" v-model="infos.id" placeholder="请输入邮箱">
        </li>
        <li>
          <label>身份证号</label>
          <input type="text" id="cardNo" name="cardNo" v-model="infos.cardNo" placeholder="请输入身份证号码">
        </li>
      </ul>
      <div m-role="UIbtn" @click="gotoSubmit">提交</div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  import headerTitle from './commons/header.vue'
  import { mapState,mapActions,mapMutations,mapGetters } from 'Vuex'
  export default {
    name: 'register',
    data () {
      return {
        msg: '注册',
        infos:{
          userName:'',
          mobileNo:'',
          password:'',
          sex:'男',
          id:'',
          cardNo:'',
        },
        errors:{
          userName:'请填写姓名',
          mobileNo:'请填写手机号',
          password:'请填写密码',
          sex:'男',
          id:'请填写邮箱',
          cardNo:'请填写身份证号',
        }
      }
    },
    methods:{//方法
      gotoSubmit(){
        let vm = this
        if(vm.infos.sex == '男'){
          vm.infos.sex = 1
        }else{
          vm.infos.sex = 2
        }

        /*for(let i in vm.infos){
          if(vm.infos[i] == ''){
            Toast(vm.errors[i])
            return false
          }
        }
        if (!this.cmf.isPhone(vm.infos.mobileNo)) {
            Toast('请输入正确的手机号');
            return false;
        }
        if (!this.cmf.isemail(vm.infos.id)) {
            Toast('请输入正确的邮箱地址');
            return false;
        }
        if (!this.cmf.isCardNo(vm.infos.cardNo)) {
            Toast('请输入正确的身份证号');
            return false;
        }*/

        let obj = JSON.stringify(vm.infos)
        console.log(obj)
        
        $.hsf.ajaxPost('regist',obj,'',function(result){
          console.log(result)
          if(result.responseCode == '0000'){
            Toast('注册成功')
            setTimeout(function(){
              vm.$router.push({
                path:'/'
              })
            },2000)
          }
        })
      }
    },
    computed:{//计算  引入vuex里的state数据

    },
    mounted(){//组件加载完执行

    },
    watch:{//监听数据，某数据改变时触发事件

    },
    components:{//引入组件
      headerTitle
    },
    destroyed(){//离开组件

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>
